<template>
  <div
    class="immersive-container"
    @keydown="handleKeydown"
    tabindex="0"
    ref="container"
  >
    <div class="overlay"></div>
    <div class="word-container">
      <span
        v-for="(letter, index) in word"
        :key="index"
        class="letter"
        :style="{ 
          animationDelay: `${index * 0.03}s`,
          fontSize: `${calculateFontSize()}rem`,
          animationDuration: `${calculateAnimationDuration()}s`
        }"
      >
        {{ letter.char }}
      </span>
    </div>
    <button class="settings-button btn btn-light shadow" @click="toggleSettings">
      <i class="bi bi-gear"></i> 设置
    </button>

    <!-- 设置模态框 -->
    <div v-if="showSettings" class="settings-modal card">
      <div class="card-body">
        <h5 class="card-title">设置</h5>
        <p class="card-text">按 <strong>Ctrl + r</strong> 重启搜索。</p>
        <p class="card-text">按 <strong>Enter</strong> 触发搜索。</p>
        <div class="mt-3">
          <label for="theme-select" class="form-label">选择主题：</label>
          <select
            id="theme-select"
            v-model="selectedTheme"
            @change="applyTheme"
            class="form-select"
          >
            <option
              v-for="(theme, index) in themes"
              :key="index"
              :value="theme"
            >
              {{ theme.name }}
            </option>
          </select>
        </div>
        <button @click="toggleSettings" class="btn btn-primary mt-3">关闭</button>
      </div>
    </div>

    <!-- 毛玻璃效果模态框 -->
    <div v-if="showGlassEffect" class="glass-effect card">
      <div class="glass-word">
        {{ glassWord }}
        <i
          class="bi bi-volume-up pronunciation-icon"
          @click="playPronunciation(glassWord)"
        ></i>
      </div>
      <div class="card-body glass-content">
        <div v-if="loading" class="text-center">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
          </div>
        </div>
        <div v-else-if="error" class="alert alert-danger">
          {{ error }}
        </div>
        <div v-else>
          <!-- 动词信息 -->
          <div v-if="wordData.verb" class="mb-4">
            <h4 class="card-subtitle mb-2 text-primary">动词</h4>
            <div class="d-flex align-items-center mb-2">
              <h5 class="mb-0">{{ wordData.verb.word }}</h5>
              <i
                class="bi bi-volume-up pronunciation-icon ms-2"
                @click="playPronunciation(wordData.verb.word)"
              ></i>
            </div>
            <p><strong>中文意思:</strong> {{ wordData.verb.chinese }}</p>
            <p><strong>例句:</strong></p>
            <ul class="list-group list-group-flush">
              <li v-for="(sentence, index) in wordData.verb.sentence" :key="index" class="list-group-item list-group-item-transparent">
                {{ sentence }}
              </li>
            </ul>
            <div class="mt-2">
              <span v-if="wordData.verb.stark" class="badge bg-warning text-dark me-1">强变化动词</span>
              <span v-if="wordData.verb.divisible" class="badge bg-success me-1">可分动词</span>
              <span v-if="wordData.verb.reflexive" class="badge bg-info text-dark me-1">反身动词</span>
              <span v-if="wordData.verb.m" class="badge bg-secondary me-1">阳性弱变化</span>
            </div>
            <p class="mt-2"><strong>助动词:</strong> {{ wordData.verb.auxiliary ? 'sein' : 'haben' }}</p>
            <h5 class="mt-3">动词变位</h5>
            <table class="table table-striped table-bordered text-center">
              <thead class="table-dark">
                <tr>
                  <th>时态</th>
                  <th>ich</th>
                  <th>du</th>
                  <th>er/es/sie</th>
                  <th>wir</th>
                  <th>ihr</th>
                  <th>sie/Sie</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Präsens</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.present, 'ich') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.present, 'du') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.present, 'er/es/sie') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.present, 'wir') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.present, 'ihr') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.present, 'sie/Sie') }}</td>
                </tr>
                <tr>
                  <td>Präteritum</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.past, 'ich') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.past, 'du') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.past, 'er/es/sie') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.past, 'wir') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.past, 'ihr') }}</td>
                  <td>{{ getConjugation(wordData.verb.conjugations.past, 'sie/Sie') }}</td>
                </tr>
                <tr>
                  <td>Infinitiv</td>
                  <td colspan="6">{{ wordData.verb.base_form }}</td>
                </tr>
                <tr>
                  <td>Partizip I</td>
                  <td colspan="6">{{ wordData.verb.p1 }}</td>
                </tr>
                <tr>
                  <td>Partizip II</td>
                  <td colspan="6">{{ wordData.verb.p2 }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 名词信息 -->
          <div v-if="wordData.noun" class="mb-4">
            <h4 class="card-subtitle mb-2 text-success">名词</h4>
            <div class="d-flex align-items-center mb-2">
              <h5 class="mb-0">{{ wordData.noun.word }}</h5>
              <i
                class="bi bi-volume-up pronunciation-icon ms-2"
                @click="playPronunciation(wordData.noun.word)"
              ></i>
            </div>
            <p><strong>中文意思:</strong> {{ wordData.noun.chinese }}</p>
            <p><strong>例句:</strong></p>
            <ul class="list-group list-group-flush">
              <li v-for="(sentence, index) in wordData.noun.sentence" :key="index" class="list-group-item list-group-item-transparent">
                {{ sentence }}
              </li>
            </ul>
            <div class="mt-2">
              <span v-if="wordData.noun.m" class="badge bg-secondary me-1">阳性弱变化</span>
              <span v-if="wordData.noun.gender && wordData.noun.gender.length" class="badge bg-info text-dark me-1">性别: {{ formatGender(wordData.noun.gender) }}</span>
              <span v-if="wordData.noun.plurals" class="badge bg-warning text-dark me-1">复数: {{ wordData.noun.plurals }}</span>
            </div>
          </div>

          <!-- 形容词信息 -->
          <div v-if="wordData.adjective" class="mb-4">
            <h4 class="card-subtitle mb-2 text-warning">形容词</h4>
            <div class="d-flex align-items-center mb-2">
              <h5 class="mb-0">{{ wordData.adjective.word }}</h5>
              <i
                class="bi bi-volume-up pronunciation-icon ms-2"
                @click="playPronunciation(wordData.adjective.word)"
              ></i>
            </div>
            <p><strong>中文意思:</strong> {{ wordData.adjective.chinese }}</p>
            <p><strong>例句:</strong></p>
            <ul class="list-group list-group-flush">
              <li v-for="(sentence, index) in wordData.adjective.sentence" :key="index" class="list-group-item list-group-item-transparent">
                {{ sentence }}
              </li>
            </ul>
          </div>

          <!-- 其他词汇信息 -->
          <div v-if="wordData.other" class="mb-4">
            <h4 class="card-subtitle mb-2 text-danger">其他</h4>
            <div class="d-flex align-items-center mb-2">
              <h5 class="mb-0">{{ wordData.other.word }}</h5>
              <i
                class="bi bi-volume-up pronunciation-icon ms-2"
                @click="playPronunciation(wordData.other.word)"
              ></i>
            </div>
            <p><strong>中文意思:</strong> {{ wordData.other.chinese }}</p>
            <p><strong>例句:</strong></p>
            <ul class="list-group list-group-flush">
              <li v-for="(sentence, index) in wordData.other.sentence" :key="index" class="list-group-item list-group-item-transparent">
                {{ sentence }}
              </li>
            </ul>
          </div>

          <!-- 同义词信息 -->
          <div
            v-if="wordData.synonyms || wordData.phrases"
            class="mt-4"
          >
            <h4 class="text-primary">同义词</h4>
            <div class="synonyms-section">
              <div class="row mb-3">
                <div class="col-12 col-md-6">
                  <h5>单词同义词</h5>
                  <div v-if="wordData.synonyms && wordData.synonyms.length">
                    <div class="d-flex flex-wrap gap-2">
                      <span
                        v-for="(synonym, sIndex) in displayedSynonyms"
                        :key="sIndex"
                        class="badge bg-secondary synonym-badge"
                        @click="lookupWord(synonym)"
                      >
                        {{ synonym }}
                        <i
                          class="bi bi-volume-up pronunciation-icon small-pronunciation-icon"
                          @click.stop="playPronunciation(synonym)"
                        ></i>
                      </span>
                    </div>
                    <button
                      v-if="wordData.synonyms.length > 10"
                      class="btn btn-link text-decoration-none p-0 mt-2"
                      @click="toggleSynonyms"
                    >
                      {{ showAllSynonyms ? '收起' : '查看更多' }} 
                      <i
                        :class="showAllSynonyms ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"
                      ></i>
                    </button>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <h5>短语同义词</h5>
                  <div v-if="wordData.phrases && wordData.phrases.length">
                    <div class="d-flex flex-wrap gap-2">
                      <span
                        v-for="(phrase, pIndex) in displayedPhrases"
                        :key="pIndex"
                        class="badge bg-info text-dark phrase-badge"
                      >
                        {{ phrase }}
                        <i
                          class="bi bi-volume-up pronunciation-icon small-pronunciation-icon"
                          @click.stop="playPronunciation(phrase)"
                        ></i>
                        <button
                          class="btn btn-sm btn-link text-decoration-none fetch-translation-button"
                          @click="lookupWord(phrase)"
                        >
                          查看
                        </button>
                      </span>
                    </div>
                    <button
                      v-if="wordData.phrases.length > 5"
                      class="btn btn-link text-decoration-none p-0 mt-2"
                      @click="togglePhrases"
                    >
                      {{ showAllPhrases ? '收起' : '查看更多' }} 
                      <i
                        :class="showAllPhrases ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"
                      ></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button
          @click="closeGlassEffect"
          class="btn btn-secondary mt-3"
        >
          关闭（ESC）
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "HomeView",
  data() {
    return {
      word: [],
      showSettings: false,
      showGlassEffect: false,
      glassWord: '',
      selectedTheme: null,
      themes: [
        {
          name: "Aurora Borealis",
          background: "linear-gradient(135deg, #004e92, #29c7ac, #bbeebb)",
          overlay: "rgba(0, 0, 0, 0.3)",
          textColor: "#f1f1f1",
          shadowColor: "rgba(0, 78, 146, 0.8)"
        },
        {
          name: "Midnight Blue",
          background: "linear-gradient(135deg, #2c3e50, #4ca1af)",
          overlay: "rgba(0, 0, 0, 0.4)",
          textColor: "#ecf0f1",
          shadowColor: "rgba(44, 62, 80, 0.8)"
        },
        {
          name: "Purple Haze",
          background: "linear-gradient(135deg, #8360c3, #2ebf91)",
          overlay: "rgba(0, 0, 0, 0.3)",
          textColor: "#f1f1f1",
          shadowColor: "rgba(131, 96, 195, 0.8)"
        },
      ],
      inputDisabled: false,
      wordData: {},
      loading: false,
      error: null,
      showAllSynonyms: false,
      showAllPhrases: false,
    };
  },
  computed: {
    displayedSynonyms() {
      if (this.showAllSynonyms) {
        return this.wordData.synonyms;
      }
      return this.wordData.synonyms ? this.wordData.synonyms.slice(0, 10) : [];
    },
    displayedPhrases() {
      if (this.showAllPhrases) {
        return this.wordData.phrases;
      }
      return this.wordData.phrases ? this.wordData.phrases.slice(0, 5) : [];
    }
  },
  methods: {
    handleKeydown(event) {
      if (this.inputDisabled) return;
      
      const key = event.key;

      // List of keys to always prevent default behavior
      const preventKeys = ["Enter", "Escape", "Shift", "Alt", "Meta", "Control", "CapsLock", "Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];

      // Debugging log (optional)
      console.log(`Key pressed: ${key}`);

      if (key === "Enter" && !this.showGlassEffect) {
        this.triggerGlassEffect();
      } else if (key === "Escape" && this.showGlassEffect) {
        this.closeGlassEffect();
      } else if (key === "Backspace" && !this.showGlassEffect && this.word.length > 0) {
        this.word.pop();
      } else if (/^[a-zA-ZäöüÄÖÜß()]+$/.test(key) && !preventKeys.includes(key)) { // 允许括号用于短语
        this.word.push({ char: key });
      } else {
        event.preventDefault();
      }
    },
    handleGlobalKeydown(event) {
      if (event.key === 'Escape' && this.showGlassEffect) {
        this.closeGlassEffect();
      }
    },
    toggleSettings() {
      this.showSettings = !this.showSettings;
    },
    applyTheme() {
      const theme = this.selectedTheme;
      document.documentElement.style.setProperty('--background', theme.background);
      document.documentElement.style.setProperty('--overlay', theme.overlay);
      document.documentElement.style.setProperty('--text-color', theme.textColor);
      document.documentElement.style.setProperty('--shadow-color', theme.shadowColor);
    },
    calculateFontSize() {
      const baseSize = 10; 
      const lengthFactor = 0.125; 
      return baseSize - this.word.length * lengthFactor;
    },
    calculateAnimationDuration() {
      const baseDuration = 0.4; 
      const lengthFactor = 0.05; 
      return Math.max(baseDuration - this.word.length * lengthFactor, 0.1);
    },

    /**
     * 触发“毛玻璃”效果并调用后端获取数据
     */
    async triggerGlassEffect() {
      if (this.word.length === 0) return;
      this.glassWord = this.word.map(letter => letter.char).join('');
      this.word = [];
      this.showGlassEffect = true;
      this.inputDisabled = true;

      this.loading = true;
      this.error = null;

      try {
        // 获取单词详细信息
        const wordResponse = await axios.get(
          `http://localhost:8080/api/word/${encodeURIComponent(this.glassWord)}/`
        );

        // 获取同义词和短语
        const synonymsResponse = await axios.get(
          `http://localhost:8080/api/word/${encodeURIComponent(this.glassWord)}/synonyms/`
        );

        this.wordData = {
          ...wordResponse.data,
          synonyms: synonymsResponse.data.synonyms,
          phrases: synonymsResponse.data.phrases,
        };

      } catch (err) {
        this.error = err.response?.data?.detail || "获取数据失败";
        console.error('API Error:', this.error);
      } finally {
        this.loading = false;
      }
    },

    /**
     * 点击同义词后再次查询
     */
    async lookupWord(word) {
      if (!word) return;
      this.glassWord = word;
      this.showGlassEffect = true;
      this.inputDisabled = true;

      this.loading = true;
      this.error = null;

      try {
        // 获取单词详细信息
        const wordResponse = await axios.get(
          `http://localhost:8080/api/word/${encodeURIComponent(word)}/`
        );

        // 获取同义词和短语
        const synonymsResponse = await axios.get(
          `http://localhost:8080/api/word/${encodeURIComponent(word)}/synonyms/`
        );

        this.wordData = {
          ...wordResponse.data,
          synonyms: synonymsResponse.data.synonyms,
          phrases: synonymsResponse.data.phrases,
        };

      } catch (err) {
        this.error = err.response?.data?.detail || "获取数据失败";
        console.error('API Error:', this.error);
      } finally {
        this.loading = false;
      }
    },

    closeGlassEffect() {
      this.showGlassEffect = false;
      this.inputDisabled = false;
      this.wordData = {};
      this.error = null;
      this.showAllSynonyms = false;
      this.showAllPhrases = false;
      this.$nextTick(() => {
        this.$refs.container.focus();
      });
    },

    /**
     * 播放单词或短语的发音
     */
    async playPronunciation(word) {
      try {
        const response = await axios.get(
          `http://localhost:8080/api/pronunciation/${encodeURIComponent(word)}/`,
          { responseType: 'blob' }
        );
        const url = URL.createObjectURL(response.data);
        const audio = new Audio(url);
        audio.play();
      } catch (err) {
        console.error(`播放发音 "${word}" 失败:`, err);
        alert(`无法播放 "${word}" 的发音。`);
      }
    },

    toggleSynonyms() {
      this.showAllSynonyms = !this.showAllSynonyms;
    },

    togglePhrases() {
      this.showAllPhrases = !this.showAllPhrases;
    },

    /**
     * 获取动词变位形式
     */
    getConjugation(conjugations, person) {
      const conjugation = conjugations.find(c => c.person === person);
      return conjugation ? conjugation.form : '-';
    },

    /**
     * 格式化名词的性别
     */
    formatGender(genders) {
      const mapping = {
        'm': '阳性',
        'f': '阴性',
        'n': '中性'
      };
      return genders.map(g => mapping[g] || g).join(' / ');
    }
  },
  mounted() {
    this.selectedTheme = this.themes[0];
    this.applyTheme();
    this.$refs.container.focus();
    window.addEventListener('keydown', this.handleGlobalKeydown);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleGlobalKeydown);
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css');

/* 
  定义主题色变量，便于后续维护和修改。
*/
:root {
  --background: linear-gradient(135deg, #1e3c72, #2a5298);
  --overlay: rgba(0, 0, 0, 0.6);
  --text-color: #f0f0f0;
  --shadow-color: rgba(255, 255, 255, 0.2);
  --card-bg: rgba(30, 30, 30, 0.8);
  --card-border: rgba(255, 255, 255, 0.1);
  --accent-color: #17a2b8;
  --badge-bg-secondary: #343a40;
  --badge-bg-info: #17a2b8;
  --badge-bg-success: #28a745;
  --badge-bg-warning: #ffc107;
  --synonym-hover-bg: #0d6efd;
  --synonym-hover-color: #ffffff;
}

body {
  font-family: 'Roboto', sans-serif;
}

.immersive-container {
  height: 100vh;
  width: 100vw;
  background: var(--background);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  outline: none;
  transition: background 0.5s ease, color 0.5s ease;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--overlay);
  z-index: 1;
  transition: background 0.5s ease;
  pointer-events: none; /* 确保不拦截键盘和鼠标事件 */
}

.word-container {
  font-size: calc(5rem + 5vw);
  font-weight: 700;
  color: var(--text-color);
  z-index: 2;
  display: flex;
  font-family: "Roboto", sans-serif;
  white-space: nowrap;
  text-shadow: 0 0 20px var(--shadow-color);
  animation: breathing 3s ease-in-out infinite;
  transition: transform 0.3s ease, color 0.5s ease, text-shadow 0.5s ease;
}

.word-container:hover {
  transform: scale(1.05);
}

.letter {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeIn forwards, particleEffect forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes particleEffect {
  0% {
    text-shadow: 0 0 10px var(--shadow-color), 0 0 20px var(--shadow-color);
  }
  100% {
    text-shadow: 0 0 20px var(--shadow-color), 0 0 40px var(--shadow-color);
  }
}

@keyframes breathing {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 20px var(--shadow-color);
  }
  50% {
    transform: scale(1.05);
    text-shadow: 0 0 30px var(--shadow-color);
  }
}

.settings-button {
  position: absolute;
  top: 8vh;
  right: 20px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.settings-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.05);
  color: var(--accent-color);
}

.settings-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  color: var(--text-color);
  padding: 30px;
  border-radius: 15px;
  z-index: 4;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-color);
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 20px;
}

.card-title {
  font-size: 1.8rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.card-text {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 10px;
}

.synonyms-section h5 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--accent-color);
}

.synonyms-list {
  display: flex;
  flex-wrap: wrap;
}

.synonym-badge, .phrase-badge {
  cursor: pointer;
  transition: transform 0.2s, background-color 0.3s, color 0.3s;
  padding: 8px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.synonym-badge {
  background-color: var(--badge-bg-secondary);
  color: #fff;
}

.phrase-badge {
  background-color: var(--badge-bg-info);
  color: #fff;
}

.synonym-badge:hover, .phrase-badge:hover {
  background-color: var(--synonym-hover-bg);
  color: var(--synonym-hover-color);
  transform: scale(1.05);
}

.pronunciation-icon {
  font-size: 1.2rem;
  color: var(--accent-color);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.pronunciation-icon:hover {
  color: #0d6efd;
  transform: scale(1.2);
}

.small-pronunciation-icon {
  font-size: 0.9rem;
  margin-left: 5px;
  color: var(--accent-color);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.small-pronunciation-icon:hover {
  color: #0d6efd;
  transform: scale(1.2);
}

.fetch-translation-button {
  font-size: 0.8rem;
  color: var(--accent-color);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.fetch-translation-button:hover {
  color: #0d6efd;
  text-decoration: underline;
}

.glass-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1600px;
  height: 85%;
  background: rgba(30, 30, 30, 0.8);
  backdrop-filter: blur(15px);
  border-radius: 25px;
  padding: 20px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
  z-index: 3;
  animation: glassAppear 0.5s ease forwards;
}

@keyframes glassAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.glass-word {
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--accent-color);
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
}

.glass-content {
  margin-top: 60px;
  color: #f0f0f0;
  font-size: 1.1rem;
  overflow-y: auto;
  max-height: 70%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.table-dark th {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  border-bottom: 2px solid var(--badge-bg-secondary);
}

.table-dark td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.translation-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  margin-top: 5px;
  font-size: 0.8rem;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.synonym-badge:hover .translation-tooltip,
.phrase-badge:hover .translation-tooltip {
  opacity: 1;
}

.btn-link {
  color: var(--accent-color);
}

.btn-link:hover {
  color: #0a58ca;
}

.clickable-synonym {
  position: relative;
  padding-right: 25px;
}

.example-sentence {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}

.example-sentence:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .word-container {
    font-size: calc(3rem + 4vw);
  }

  .settings-button {
    font-size: 1rem;
    padding: 8px 16px;
  }

  .settings-modal, .glass-effect {
    padding: 20px;
    max-width: 95%;
    height: 90%;
  }

  .glass-content {
    font-size: 1rem;
  }

  .glass-word {
    font-size: 2rem;
  }

  .glass-content table {
    font-size: 0.9rem;
  }

  .pronunciation-icon {
    font-size: 1rem;
  }

  .small-pronunciation-icon {
    font-size: 0.8rem;
  }

  .fetch-translation-button, .pronunciation-icon, .small-pronunciation-icon {
    padding: 5px;
  }
}

/* 优化例句的展示样式 */
.list-group-item {
  background-color: transparent;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background-color 0.3s ease;
  color: #ECF0F0;
}

.list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* 强调词汇属性的样式 */
.badge {
  font-size: 0.85rem;
  padding: 5px 10px;
  border-radius: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.text-primary {
  color: var(--accent-color) !important;
}

.text-success {
  color: var(--badge-bg-success) !important;
}

.text-warning {
  color: var(--badge-bg-warning) !important;
}

.text-info {
  color: var(--badge-bg-info) !important;
}

.text-danger {
  color: #dc3545 !important;
}

/* 调整按钮样式 */
.btn-secondary {
  background-color: var(--badge-bg-secondary);
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: #495057;
}

/* 优化表格样式 */
.table {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.table th, .table td {
  padding: 12px 15px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-bordered {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 576px) {
  .glass-content {
    padding: 10px;
  }

  .card-title {
    font-size: 1.5rem;
  }

  .glass-word {
    font-size: 1.8rem;
  }
}
</style>
